<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
    <script src="../node_modules/jquery/dist/jquery.min.js"></script>
    <script src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="../publlic/url-utils.js"></script>
    <style>
        #id{
            display: none;
        }
    </style>
    <script>
        $(function () {
            

        })

        function modelshow(data) {
                // const data1 = JSON.parse(data)
                $("#id").val(data.id)
                $("#input_name").val(data.name)
                $("#textarea_message").val(data.message)
                // $("#myModal").modal('show')

            }


        // 修改数据
        function changeSave() {

            // 取值
            const id = $('#id').val();
            const name = $('#input_name').val();
            const content = $('#textarea_message').val();
            // 调数据
            $.ajax({
                type: 'GET',
                url: `/update/message?id=${id}&name=${name}&message=${content}`,
                success: function (res) {
                    console.log(res);
                    if (res.success) {
                        location.reload()
                    } else {
                        console.log(res.msg);
                    }
                }
            })

        }

        //  翻页操作
        function prev() {
            let query = getQueryParams(location.search)
            console.log(query.pageNum)
            if (query.pageNum > 0) {
                location.href = ("/?pageNum=" + (Number(query.pageNum) - 1))
            }
        }

        function next(a) {
            let query = getQueryParams(location.search)
            if (query.pageNum < a.length) {
                location.href = ("/?pageNum=" + (Number(query.pageNum) + 1))
            }
        }
    </script>
</head>

<body>

    <div class="header container">
        <div class="page-header">
            <h1>留言板 <small>天亮教育</small></h1>
            <a class="btn btn-success" href="/add">发表留言</a>
        </div>
        <form action="/" class="form-inline">
            <div class="form-group">
                <label for="searchName">检索姓名：</label>
                <input type="text" class="form-control" id="searchName" name="searchName" placeholder="请输入检索的姓名">
            </div>
            <div class="form-group">
                <label for="searchContent">检索内容：</label>
                <input type="text" class="form-control" id="searchContent" name="searchContent" placeholder="检索内容">
            </div>
            <button type="submit" class="btn btn-default">查找</button>
        </form>


        <div class="comments container">
            <ul class="list-group">

                {{each list }}
                <li class="list-group-item"><a href="/delete?id={{$value.id}}">{{ $value.name }}</a>----- {{ $value.message }} <span data-toggle="modal"
                        data-target="#myModal" class="pull-right"
                        onclick="modelshow({{$value}})">{{ $value.create_time}}</span>
                </li>
                {{/each}}
            </ul>
        </div>

        <nav aria-label="Page navigation">
            <ul class="pagination">
                <li>
                    <a onclick="prev()" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
                {{each total}}
                <li><a href="/?pageNum={{$value}}">{{$value}}</a></li>
                {{/each}}
                <li>
                    <a onclick="next({{total}})" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
            </ul>
        </nav>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">更新</h4>
                </div>

                <div class="modal-body">
                    <form action="" method="POST" role="form">
                        <div class="form-group">
                            <label for="input_name">姓名</label>
                            <input type="text"  id="id">
                            <input type="text" class="form-control" required minlength="2" maxlength="6" id="input_name"
                                name="name" placeholder="请写入你的姓名">
                        </div>
                        <div class="form-group">
                            <label for="textarea_message">留言内容</label>
                            <textarea class="form-control" name="message" id="textarea_message" cols="30" rows="10"
                                required minlength="5" maxlength="20"></textarea>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" onclick="changeSave()"
                        data-dismiss="modal">保存</button>
                </div>

            </div>
        </div>
    </div>

</body>

</html>